<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>1-3 JS对象</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-2.2.4.js"></script>
    <script src="js/main.js"></script>
</head>
<body>
<div class="container">
    <h1>1-3 JS对象</h1>

    <h3>对象</h3>
    <p>JS中万物皆对象，如字符串、数字、日期、数组、函数等，也可以自定义对象</p>
    <p>创建对象的方法如下：
    <ol>
        <li>先创建实例再定义属性
            <pre>
            <code>person = new Object()</code>
            <code>// 也可以这样写，更简单：person = {}</code>
            <code>person.firstname="Bill";</code>
            <code>person.lastname="Gates";</code>
            <code>person.age=56;</code>
            <code>person.eyecolor="blue";</code>
            </pre>
        </li>

        <li>
            直接赋值：<code>person = {firstname:"Bill",lastname:"Gates",age:56,eyecolor:"blue"}</code>
        </li>
        <li>
            使用对象构造器（类似java中的构造函数）创建实例
            <pre>
        function Person(firstname,lastname,age,eyecolor) {
            this.firstname = firstname;
            this.lastname = lastname;
            this.age = age;
            this.eyecolor = eyecolor;
        }
        var person1 = new Person("艾萨克","牛顿",380,"green");
        </pre>
        </li>
        <li>如果要添加方法，则在构造器中加入<code>this.changeName = changeName;</code>，然后再定义函数方法<code>function changeName(name) {
            this.firstname = name;
            }</code>
        </li>
    </ol>
    <!--
    <script>
        function Person(firstname,lastname,age,eyecolor) {
            this.firstname = firstname;
            this.lastname = lastname;
            this.age = age;
            this.eyecolor = eyecolor;
            this.changeName = changeName;
        }
        var person1 = new Person("艾萨克","牛顿",380,"green");
        function changeName(name) {
            this.firstname = name;
        }
        person1.changeName("英国");
        alert(person1.firstname+person1.lastname)
    </script>
    -->
    <p>访问对象的属性可通过<code>objectName.propertyName</code></p>
    <p>访问对象的方法可通过<code>objectName.methodName()</code></p>
    <p>可以通过for in循环将对象的每个属性遍历一次，举例在稍后的"js语句"部分</p>


    <h3>数字</h3>
    <p>javaScript 只有一种数字类型，即双精度浮点数，可以带或不带小数点。可通过科学计数法表示极大或极小的数：
        <br><code>var y=123e5;      // 12300000</code>
        <br><code>var z=123e-5;     // 0.00123</code>
    </p>

    <p>js中数字类型都存储为8个字节的长度，即64位，其中：
        <br>第1位：        符号位，0表示正数，1表示负数
        <br>第2位到第12位： 储存指数部分
        <br>第13位到第64位：储存小数部分（即有效数字）
    <div class="alert alert-danger well-sm">原文上有一句“JavaScript 中的所有数字都存储为根为 10 的 64 位（8 比特），浮点数。
        ”，其中这个10迷惑了我，经一番查找，最终得到一个感觉比较勉强的答案：10代表科学计数法中的底数！</div>
    <p>精度范围（10进制）：整数最多15位，小数最多17位</p>
    <p>如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数。</p>
    <p>可以通过“new”来声明变量的类型。
        <br><code>var carName = new String;</code>
        <br><code>var x = new Number;</code>
        <br><code>var y = new Boolean;</code>
        <br><code>var cars = new Array;</code>
        <br><code>var person = new Object;</code>
    </p>

    <h3>字符串</h3>
    <p>常用的属性</p>
    <ol>
        <li><code>str.length</code>：获取长度</li>
    </ol>
    <p>常用的方法</p>
    <ol>
        <li><code>txt.small();txt.fontsize(16)</code>此类方法通过标签为字符串添加样式，因可用css实现效果，故此处略过</li>
        <li><code>str.indexOf("hello")</code>"hello"在字符串str中第一次匹配的下标，如果不匹配返回-1</li>
        <li><code>str.match("world")</code>"world"在字符串str中如果存在则返回这个字符串，否则返回null</li>
        <li><code>str.replace("Microsoft","W3School")</code>将str字符串中第一次出现的"Microsoft"用"W3School"替代</li>
        <li><code>txt.toUpperCase()</code>将txt字符串中的字符转换为大写</li>
    </ol>

    <h3>日期</h3>
    <p><code>Date()</code>：获取当前日期时间
        <button class="btn btn-primary btn-sm form-inline" onclick="$(this).after(' '+Date())">显示当前日期</button>
    </p>
    <p><code> new Date().getTime()</code>：从1970年至今过去的毫秒数<strong>（注意这里有关键字“new”）</strong>
        <button class="btn btn-primary btn-sm form-inline" onclick="$(this).after(' '+new Date().getTime())">显示</button>
    </p>
    <p><code>var date = new Date(); date.setFullYear(1985,9,2)</code>：设置日期为1985年10月2日<strong>(请注意月份从0开始)</strong>
        <button class="btn btn-primary btn-sm form-inline setDate" onclick="setDate(this)">试一试</button>
    </p>
    <div class="alert alert-danger well-sm">这里点击事件中的函数不能直接写成<code>new Date().setFullYear(1985,9,2)</code>,否则会返回毫秒数，原因暂不明确；
        <br>另外，此种写法导致在html中没有成功用点击事件的匿名函数实现，不知有解否？</div>
    <p><code> new Date().toUTCString()</code>：将日期转换成字符串
        <button class="btn btn-primary btn-sm form-inline" onclick="$(this).after(' '+new Date().toUTCString())">试一试</button>
    </p>
    <p><code> new Date().getDay()</code>：例子请见语句中的switch部分</p>
    <p>通过获取当前时分秒，生成一个动态时钟
        <button class="btn btn-primary btn-sm form-inline" onclick="testClock(this)">试一试</button>
        <span class="clock"></span>
    <div class="alert alert-danger well-sm">动态时钟例子中使用了<code>setTimeout(function(){ testClock(thisbtn) },500);</code>
    <br>setTimeout中第一个参数是个函数，如果再需要传参就不能像平常一样写在括号里，应该写成一个匿名函数返回目标函数这样传参。</div>
    <p>日期可以根据时间先后做大小比较。</p>

    <h3>数组</h3>
    <p>数组的定义有四种方法
    <ol>
        <li><code>var arr = new Array();</code>只声明，需要时再赋值</li>
        <li><code>var arr = new Array(5);</code>指定长度</li>
        <li><code>var arr = new Array(elem0,elem1,elem2...);</code>声明的同时赋值</li>
        <li><code>var arr = [elem0,elem1,elem2...];</code>声明的同时赋值，这种我喜欢O(∩_∩)O~</li>
    </ol>
    <p>数组的赋值：<code>arr[0]="str1";arr[1]=obj1</code></p>
    <p>数组的访问可通过数组名和下标进行：<code>alert(arr[1])</code></p>
    <p>数组的修改，即对要修改元素重新赋值即可：<code>arr[0]="str2";</code></p>

    <h3>逻辑</h3>
    <p>在js中，如果对象未初始化或者其值为0，-0，null，NaN，""，false，undefined这7种时，其逻辑值为false，其余的逻辑值都为true。</p>
    <p>字符串"false"的逻辑值也为true。</p>
    <p>可以通过<code>new Boolean(obj)</code>的方法来检查对象obj的逻辑值</p>

    <h3>算数对象Math</h3>
    <p><code>Math.round()</code>可对一个小数进行四舍五入到整数
    <div class="form-group form-inline">
        <input id="testRound" class="form-control" placeholder="请输入一个小数">
    <button class="btn btn-primary btn-sm form-inline" onclick="$(this).next('.result').text(' '+ Math.round($('#testRound').val()))">试一试round()</button>
    <span class="result"></span>
    </div>
    <p><code>Math.random()</code>可返回一个0到1之间的随机数，但不包括0</p>
    <p><code>Math.max(num1,num2);Math.min(num1,num2);</code>返回两个数中比较大(小)的一个</p>
    <p>JavaScript 提供 8 种可被 Math 对象访问的算数值及使用方法：
    <ol>
        <li>常数 <code>Math.E</code></li>
        <li>圆周率 <code>Math.PI</code></li>
        <li>2 的平方根 <code>Math.SQRT2</code></li>
        <li>1/2 的平方根 <code>Math.SQRT1_2</code></li>
        <li>2 的自然对数 <code>Math.LN2</code></li>
        <li>10 的自然对数 <code>Math.LN10</code></li>
        <li>以 2 为底的 e 的对数 <code>Math.LOG2E</code></li>
        <li>以 10 为底的 e 的对数 <code>Math.LOG10E</code></li>
    </ol>

    <h3>正则表达式</h3>
    <p>后面专题学习，先跳过</p>
</div>
</body>

<script>
    function testClock(thisbtn) {

        var today = new Date();
        var h = today.getHours();
        var m = today.getMinutes();
        var s = today.getSeconds();
        m = checkNum(m);
        s = checkNum(s);
        $(thisbtn).next(".clock").text(h+":"+m+":"+s);
        setTimeout(function(){
            testClock(thisbtn)
        },500);
    }
    function checkNum(n){
        if(n<10){
            n =  "0"+n
        }
        return n;
    }
    function setDate(thisbtn) {
        var date = new Date();
        date.setFullYear(1985,9,2);
        $(thisbtn).after(' '+date)
    }
</script>
</html>
